<template>
		<div class="common-layout">
			<el-container>
				<el-header>
					<h1>软件公司办公自动化系统 </h1>
				</el-header>


				<el-col :span="2">
					<el-button type="danger" plain @click="out">退出系统</el-button>
				</el-col>
				<el-container>


					<el-aside width="300px">
						<el-row>

							<!-- <el-switch v-model="value1" @node-click="turn" /> -->

							<el-col :span="6">
								<br />
								<el-avatar :size="50" :src="circleUrl" style="align-items: center;" />
							</el-col>
							<el-col :span="6"><br /><br /><label
									style="color: #FFFFFF; font-size: large;">{{user.userName}}</label></el-col>
							<el-col :span="12"></el-col>
						</el-row>
						<el-menu active-text-color="#ffd04b" background-color="{{itemcolor[0]}}"
							class="el-menu-vertical-demo" default-active="2" text-color="#fff" router=true>
							<label></label><br />
							<label style="color: #FFFFFF;">日常管理</label>
							<el-sub-menu index="1">
								<template #title>
									<el-icon>
										<Checked />
									</el-icon>
									<span>任务管理</span>
								</template>
								<template v-for="item in permission">
									<template v-if="item.perFather === '任务管理'">
										<el-menu-item :index="item.perRouter">
											{{item.perName}}
										</el-menu-item>
									</template>
								</template>
							</el-sub-menu>
							<el-sub-menu index="2">
								<template #title>
									<el-icon>
										<Folder />
									</el-icon>
									<span>文档管理</span>
								</template>
								<template v-for="item in permission">
									<template v-if="item.perFather === '文档管理'">
										<el-menu-item :index="item.perRouter">
											{{item.perName}}
										</el-menu-item>
									</template>
								</template>
							</el-sub-menu>
							<el-sub-menu index="3">
								<template #title>
									<el-icon>
										<User />
									</el-icon>
									<span>通讯录管理</span>
								</template>
								<template v-for="item in permission">
									<template v-if="item.perFather === '通讯录管理'">
										<el-menu-item :index="item.perRouter">
											{{item.perName}}
										</el-menu-item>
									</template>
								</template>
							</el-sub-menu>
							<el-sub-menu index="4">
								<template #title>
									<el-icon>
										<ChatDotRound />
									</el-icon>
									<span>通知管理</span>
								</template>
								<template v-for="item in permission">
									<template v-if="item.perFather === '通知公告'">
										<el-menu-item :index="item.perRouter">
											{{item.perName}}
										</el-menu-item>
									</template>
								</template>
							</el-sub-menu>
							<el-sub-menu index="5">
								<template #title>
									<el-icon>
										<location />
									</el-icon>
									<span>即时通讯</span>
								</template>
								<template v-for="item in permission">
									<template v-if="item.perFather === '即时通讯'">
										<el-menu-item :index="item.perRouter">
											{{item.perName}}
										</el-menu-item>
									</template>
								</template>
							</el-sub-menu><br />
							<label style="color: #FFFFFF;">基础信息管理</label>
							<el-sub-menu index="6">
								<template #title>
									<el-icon>
										<Setting />
									</el-icon>
									<span>个人信息修改</span>
								</template>
								<el-menu-item index="6-1">
									<router-link to="/personalInformation" class="style1">个人信息</router-link>

								</el-menu-item>
								<el-menu-item index="6-2">
									<router-link to="/systemSetting" class="style1">系统主题</router-link>
								</el-menu-item>
								<el-menu-item index="6-3">
									<router-link to="/password" class="style1">密码管理</router-link>
								</el-menu-item>
							</el-sub-menu>
						</el-menu>

						<!-- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" /> -->

					</el-aside>
					<el-main>
						
							<router-view></router-view>
						
					</el-main>
				</el-container>
				<el-footer style="font-size:xx-small ; ">
					不良信息举报邮箱：123456789@qq.com | 涉未成年举报邮箱：123456789@qq.com | 不良信息举报电话：19932714944
					<br><a href="https://jbts.mct.gov.cn/" class="style2">12345政务服务便民热线</a> |
					<a href="" class="style2">儿童色情信息举报专区</a> |
					<a href="https://www.shdf.gov.cn/shdf/channels/740.html" class="style2">扫黄打非举报</a>
					<br>网上有害信息举报专区：<a href="https://www.12377.cn/" class="style2">中国互联网违法和不良信息举报中心</a>
					<br>公司名称：梅河口阿里嘎吧有限公司|公司地址：燕山大学5B403|电话：19932714944
				</el-footer>
			</el-container>
		</div>
	
</template>

<script>
	import qs from 'qs'
	export default {
		data() {
			return {
				user: {},
				session: {},
				permission: [],
				itemcolor: "#282c35",
				value1: true
			}
		},
		methods: {
			out() {
				this.$router.push("/")
			},
			turn() {
				itemcolor = "#00ffff"
			}

		},
		created() {
			let u = JSON.parse(sessionStorage.getItem("user"))
			this.user = u
			if (this.user.userPosition == '系统管理员') {
				this.$router.push("/index_admin")
			}
			this.session.bothSidesId = this.user.userPosition

			let that = this
			let str = qs.stringify(that.session)
			that.$axios.get("http://localhost:8080/permission/getpermission?" + str).then(function(res) {
				console.log(res.data)
				that.permission = res.data
			})
		}
	}
</script>

<style>
	.el-header {
		background-color: #f4f4f5;
	}

	.el-main {
		background-color: #F0F2F5;
		height: 700px;
	}

	.el-footer {
		background-color: #FAFCFF;
	}

	.el-aside {
		background-color: #111c34;
	}

	.style1 {
		color: #FFFFFF;
		text-decoration: none;
	}

	.style2 {
		color: #000000;
		text-decoration: none;
	}

	#building2 {
		background: url("../assets/2.jpg");
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
	}
</style>
